<template>
  <div class="userDetail">
    <el-form class="form" label-width="auto">
      <el-form-item>
        <el-text style="margin-right: 20px; font-size: larger; font-weight: bolder;">
          <template v-if="!data.user.id">
            {{ util.language('新增', 'New ') }}
          </template>
          <template v-else>
            {{ util.language('编辑', 'Edit ') }}
          </template>
          {{ util.language('员工', 'Staff') }}
        </el-text>
        <el-button-group>
          <el-button @click="router.go(-1)">{{ util.language('返回', 'Back') }}</el-button>
          <el-button type="primary" @click="save()" :loading="loading.save">{{ util.language('保存', 'Save') }}</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="ID" v-if="data.user.id">
        <el-input v-model="data.user.id" disabled />
      </el-form-item>
      <el-form-item :label="util.language('特殊身份', 'Special identity')" v-if="data.user.admin">
        <el-tag type="primary">{{ util.language('超管', 'Super admin') }}</el-tag>
      </el-form-item>
      <el-form-item :label="util.language('状态', 'State')" v-if="data.user.id">
        <el-tag type="success" v-if="data.user.hasUsing">{{ util.language('启用', 'Enable') }}</el-tag>
        <el-tag type="danger" v-if="!data.user.hasUsing">{{ util.language('停用', 'Disable') }}</el-tag>
      </el-form-item>
      <el-form-item :label="util.language('角色', 'Role')">
        <el-select filterable clearable v-model="data.user.roleId" style="width: 100%;">
          <el-option v-for="item in show.roles" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="util.language('登录名', 'Username')">
        <el-input v-model="data.user.username" v-if="!data.user.id" />
        <el-text v-else>{{ data.user.username }}</el-text>
      </el-form-item>
      <el-form-item :label="util.language('密码', 'Password')" v-if="!data.user.id">
        <el-input v-model="data.user.password" type="password" />
      </el-form-item>
      <el-form-item :label="util.language('员工编号', 'Staff code')">
        <el-input v-model="data.user.code" v-if="!data.user.id" />
        <el-text v-else>{{ data.user.code }}</el-text>
      </el-form-item>
      <el-form-item :label="util.language('称呼', 'Nick')">
        <el-input v-model="data.user.nick" />
      </el-form-item>
      <el-form-item :label="util.language('电话号', 'Phone')">
        <el-input v-model="data.user.phone" />
      </el-form-item>
      <el-form-item :label="util.language('创建时间', 'Create time')" v-if="data.user.createDatetime">
        <el-text v-if="data.user.id">{{ util.parseTime(data.user.createDatetime) }}</el-text>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '../../apis/api'
import cache from '../../utils/cache'
import util from '../../utils/util'

const router = useRouter()
const loading = reactive({
  save: false
})
const show = reactive({
  roles: []
})
const pageParam = cache.getObject(cache.keys.pageParam + "userDetail")
const data = reactive({
  user: pageParam ? JSON.parse(JSON.stringify(pageParam)) : {}
})

api.get('/backend/role/getAllRole').then(res => {
  show.roles = res.roleList
})

const save = () => {
  loading.save = true
  if (!data.user.id) {
    api.post('/backend/user/add', {
      nick: data.user.nick,
      phone: data.user.phone,
      roleId: data.user.roleId,
      code: data.user.code,
      username: data.user.username,
      password: data.user.password,
      hasUsing: true,
    }).then(() => {
      ElMessage.success(util.language('保存成功', 'success'))
      router.go(-1)
    }).finally(() => {
      loading.save = false
    })
  } else {
    api.post('/backend/user/setById', {
      id: data.user.id,
      nick: data.user.nick,
      phone: data.user.phone,
      roleId: data.user.roleId,
    }).then(() => {
      ElMessage.success(util.language('保存成功', 'success'))
      router.go(-1)
    }).finally(() => {
      loading.save = false
    })
  }
}
</script>

<style lang="less">
.userDetail {
  margin: auto;
  max-width: 900px;
}
</style>